<template>
  <!-- 中介 -->
  <div class="box">
    <heads></heads>
    <tools></tools>
    <div class="tit1">
      <div class="list">
        <div class="li" @click="$router.push('/')">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <!-- <div style="color:#64B6A8;">在售楼盘</div> -->
        <div class="sousuo">
          <input type="text" v-model="searchtext" @keyup.enter="search" placeholder="请输入名称开始搜索" />
          <p class="el-icon-search" @click="search"></p>
        </div>
        <!-- <div class="but">下载帮帮同城app</div> -->
      </div>
    </div>
    <div class="lunbo">
      <el-carousel height="240px">
        <el-carousel-item v-for="(item, index) in imgList" :key="index">
          <img :src="$img + item.image" style="cursor: pointer;" @click="toBanner(item)" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 这里应该有个轮播图 -->
    <transition name="fade">
      <div class="swiper-btn-control-wrap center">
        <div class="swiper-btn-control btn-control1" @click.stop="prev">
          <span class="el-icon-arrow-left btn-control"></span>
        </div>
        <div class="swiper-btn-control btn-control2" @click.stop="next">
          <span class="el-icon-arrow-right btn-control"></span>
        </div>
        <div @touchend="end" @touchstart="start" @touchmove="move" class="swiper">
          <div v-for="(item, index) in imgs" :style="config5[index]" :key="item.cover" @mouseover="swiper = false"
            @mouseleave="swiper = true" class="swiperclass">
            <img :src="item.cover" style="width: 100%; height: 100%;cursor: pointer;" @click="chooseItem(item, index)" />
          </div>
          <div class="swiper-button-prev" @click="prev" style="color:'#64b6a8!important'"></div>
          <div class="swiper-button-next" @click="next" style="color:'#64b6a8!important'"></div>
        </div>
      </div>
    </transition>
    <div class="saixuan">
      <div class="li">
        <p class="p1">区域</p>
        <p class="p2" @click="quyuClick(-1)" :class="quyuIndex == -1 ? 'xuan' : ''">
          不限
        </p>
        <div class="list">
          <div v-for="(item, index) in quyuList" :key="index" @click="quyuClick(item)"
            :class="quyuIndex == item ? 'xuan' : ''">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="yixuan">
      <div class="na">已选条件：</div>
      <div class="li" v-for="(item, index) in screenList" :key="index" v-show="item.show">
        {{ item.value }}
        <img src="../../assets/cha.png" @click="clear()" />
      </div>
      <div class="qinchu" @click="clear()">清除全部</div>
    </div>
    <div class="bottom">
      <div class="tit">全部店铺</div>
      <div class="list">
        <div class="li" v-for="(item, index) in shopInfoList" :key="index">
          <!-- <el-checkbox v-if="checkboxShow"></el-checkbox> -->
          <img class="img" :src="$img + item.image"
            style="object-fit: contain;cursor: pointer;background-color: rgb(209 204 204 / 20%);"
            @click="details(item.id)" />
          <div class="wenzi" style="cursor: pointer;" @click="details(item.id)">
            <p class="p1">{{ item.shopName }}</p>
            <p class="p2">地址：{{ item.shopAddress }}</p>
            <p class="p5">
              <span style="color:red;font-size:22px;margin-right: 21px;">{{ item.houseNum }}套</span>
              <span style="font-size:14px;">在售/在租</span>
            </p>
          </div>
          <div class="but">
            <div class="but1" @click="phoneGet(index)">
              <img src="../../assets/dianhua_lang.png" />
              <p>{{ item.phonestate ? item.shopPhone : "查看电话" }}</p>
            </div>
            <div class="but2" @click="chat(item.userId)">
              <img src="../../assets/weixin_b.png" />
              在线聊天
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="shopInfoTotal" :current-page="shopInfoPage.pageNo"
        @current-change="shopInfochange"></el-pagination>
    </div>
    <floor></floor>
    <chat ref="chats"></chat>
    <div class="gotop" @click="toTop" v-show="showToTop" style="left: calc(100vw / 2 + 600px);;">
      <img src="@/assets/top.png" />返回顶部
    </div>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import chat from "../../components/chat.vue";
import tools from "../../components/tools.vue";
export default {
  components: {
    floor,
    heads,
    chat,
    tools
  },
  data() {
    return {
      quyuIndex: -1,
      screenList: [],
      imgList: [],
      // 卡片轮播
      loading: true,
      currentIndex: 3, //当前中间imgs数组中index
      centerInfo: "", // 当前中间信息
      startX: "",
      endX: "",
      imgs: [],
      previous: 0,
      config5: [
        {
          id: "-A",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "0",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        },
        {
          id: "A",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "8%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "B",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "20%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "center",
          position: "absolute",
          width: "360px",
          height: "240px",
          top: "0px",
          left: "calc(100% - 50% - 180px)",
          // marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s"
        },
        {
          id: "D",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "calc(100% - 20% - 323px)",
          opacity: 1,
          zIndex: 2,
          transition: ".4s"
        },
        {
          id: "E",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "calc(100% - 8% - 290px)",
          opacity: 1,
          zIndex: 1,
          transition: ".4s"
        },
        {
          id: "E+",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "calc(100% - 243px)",
          opacity: 1,
          zIndex: 0,
          transition: ".4s"
        }
      ],
      quyuList: [],
      shopInfoPage: {
        pageNo: 1,
        pageSize: 10,
        longitude: "30",
        latitude: "112",
        status: "1",
        shopType: "1"
      },
      shopInfoList: [],
      shopInfoTotal: 0,
      bannerList: [],
      searchtext: "",
      t1: "",
      swiper: true,
      user: {},
      loginstate: false
    };
  },
  mounted() {
    this.t1 = setInterval(() => {
      if (this.swiper) {
        this.next();
      }
    }, 4000);
  },
  beforeDestroy() {
    clearInterval(this.t1);
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getUser();
      this.initMap();
      this.getDictionaries();
      this.getOneBanner();
      this.getBanner();
      this.centerCard(); // 获取中间卡片信息
      this.addCardStyle(); // 加入样式位置的index
    },
    initMap() {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        output: "jsonp"
      };
      this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip", data).then(
        data => {
          // 经度
          this.shopInfoPage.longitude = data.result.location.lng;
          // 维度
          this.shopInfoPage.latitude = data.result.location.lat;
          this.getShopInfo();
        }
      );
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
      } else {
        this.loginstate = false;
      }
    },
    getShopInfo() {
      this.$getHttp("/mob/user/getShopInfo", this.shopInfoPage).then(data => {
        if (data.code == 200) {
          data.page.list.forEach(e => {
            e.image = e.image.split("|")[0];
            e.phonestate = false;
          });
          this.shopInfoList = data.page.list;
          this.shopInfoTotal = data.page.count;
        }
      });
    },
    //查询字典(筛选条件)
    getDictionaries() {
      this.$getHttp("/mob/home/getDictionaries", { type: "7" }).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            this.quyuList.push(e.valueName);
            this.screenList.push({
              value: e.valueName,
              show: false
            });
          });
        }
      });
    },
    //获取首页广告
    getOneBanner() {
      this.$getHttp("/mob/home/getBanner", { type: 6 }).then(data => {
        if (data.code == 200) {
          this.imgList = data.list;
          // data.list.forEach( (e) =>{
          // 	this.bannerList.push(e)
          // 	this.imgList.push({
          // 		index:e.sort-1,
          // 		cover:this.$img+e.image
          // 	})
          // })
        }
      });
    },
    getBanner() {
      this.$getHttp("/mob/home/getBanner", { type: 12 }).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            this.bannerList.push(e);
            this.imgs.push({
              index: e.sort - 1,
              cover: this.$img + e.image
            });
          });
          this.addCardStyle();
        }
      });
    },
    search() {
      if (this.searchtext.trim() != "") {
        const routeLink = this.$router.resolve({
          path: "/index/intermediarySeach?search=" + this.searchtext
        });
        window.open(routeLink.href, "_blank");
      }
      // this.openUrl({
      //   path: "/index/houseSearch",
      //   query: {
      //     search: this.searchtext,
      //   },
      // });
    },
    shopInfochange(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.shopInfoPage.pageNo = e;
      this.shopInfoList = [];
      this.getShopInfo();
    },
    quyuClick(name) {
      if (name == -1) {
        delete this.shopInfoPage.shopArea;
        this.shopInfoPage.pageNo = 1;
        this.getShopInfo();
        this.screenList.forEach(e => {
          e.show = false;
        });
      } else {
        this.shopInfoPage.shopArea = name;
        this.shopInfoPage.pageNo = 1;
        this.getShopInfo();
        this.screenList.forEach(e => {
          e.show = false;
          if (e.value == name) {
            e.show = true;
          }
        });
      }
      this.quyuIndex = name;
    },
    clear() {
      delete this.shopInfoPage.shopArea;
      this.shopInfoPage.pageNo = 1;
      this.getShopInfo();
      this.quyuIndex = -1;
      this.screenList.forEach(e => {
        e.show = false;
      });
    },
    phoneGet(index) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      if (!this.shopInfoList[index].phonestate) {
        this.$postHttp("/mob/user/call", {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          telephoneNumber: this.shopInfoList[index].contactsPhone,
          associationId: this.shopInfoList[index].id,
          type: "1"
        }).then(res => { });
      }
      this.shopInfoList[index].phonestate = !this.shopInfoList[index]
        .phonestate;
    },
    //开启聊天
    chat(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.$refs.chats.chatOpne(id);
    },
    details(id) {
      this.openUrl({
        path: "/index/ShopDetails",
        query: {
          id: id
        }
      });
    },
    async getData() {
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 滑动上一个
    prev(index) {
      // this.imgs.unshift(this.imgs.pop());
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerCard();
      this.centerIndex("prev");
    },
    // 滑动下一个
    next() {
      // this.imgs.push(this.imgs.shift());
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      this.centerIndex("next");
      // console.log(this.currentIndex);
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      if (this.interval > 40) {
        this.startX = this.endX;
        this.prev();
      }
      if (this.interval < -40) {
        this.startX = this.endX;
        this.next();
      }
    },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
      // this.endY = event.changedTouches[0].clientY;
      // this.endX = event.changedTouches[0].clientX;
      // this.formatSwiper();
    },
    formatSwiper() {
      if (this.startX > this.endX) {
        console.log("左边滑动");
        if (this.startX > this.endX + 40) {
          this.next();
        }
      } else {
        console.log("右边滑动");
        if (this.endX > this.startX + 40) {
          this.prev();
        }
      }
    },
    // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
    stopDefault(event) {
      let differenceY = this.endY - this.startY;
      let differenceX = this.endX - this.startX;
      if (Math.abs(differenceX) > Math.abs(differenceY)) {
        event.preventDefault();
      }
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == "prev") {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    // 点击
    chooseItem(item, index) {
      this.bannerList.forEach(el => {
        if (item.cover == this.$img + el.image) {
          localStorage.setItem("banner", JSON.stringify(el));
          // this.openUrl({
          //   path: "/index/particulars",
          //   query: {
          // 		type:'banner'
          //   },
          // });
          const routeLink = this.$router.resolve({
            path: "/index/particulars?type=banner"
          });
          window.open(routeLink.href, "_blank");
        }
      });
      // let cycles = item.index;
      // if (item.index < 3) {
      //   for (let i = 0; i < 3 - cycles; i++) {
      //     console.log(item.index);
      //     this.prev();
      //   }
      //   console.log("1");
      // } else if (item.index > 3) {
      //   for (let i = -1; i < item.index - 3; i++) {
      //     this.next();
      //   }
      //   console.log("2");
      // } else if (item.index == 3) {
      //   console.log("3");
      // 	this.imgs.forEach((e) =>{
      // 		if(e.index == 3){
      // 			this.bannerList.forEach((el) =>{
      // 				if(e.cover == (this.$img+el.image)){
      // 					localStorage.setItem("banner",JSON.stringify(el))
      // 					this.openUrl({
      // 					  path: "/index/particulars",
      // 					  query: {
      // 							type:'banner'
      // 					  },
      // 					});
      // 				}
      // 			})
      // 		}
      // })
      // }
    },
    toBanner(item) {
      localStorage.setItem("banner", JSON.stringify(item));
      this.openUrl({
        path: "/index/particulars",
        query: {
          type: "banner"
        }
      });
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgs[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
      // this.$emit('centerInfo', this.centerInfo);
      // console.log(this.imgs[2].id);
    },

    addCardStyle() {
      if (this.imgs.length > 7) {
        let addtime = this.imgs.length - 7;
        for (let i = 0; i < addtime; i++) {
          console.log("add");
          this.config5.push({
            id: "center",
            position: "absolute",
            width: "45%",
            height: "100%",
            top: "0px",
            left: "50%",
            marginLeft: "-22.5%",
            opacity: 0,
            transition: ".1s"
          });
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.swiperclass {
  margin-top: 10px;
  // box-shadow: rgba(181, 181, 181, 0.3) 0px 10px 16px 0px;
  box-shadow: 0px 0px 10px 8px rgba(181, 181, 181, 0.3);
  // border: 2px solid rgb(214, 210, 210);
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.lunbo {
  width: 1200px;
  margin: 50px;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 0;

  img {
    width: 100%;
    height: 240px;
  }
}

.saixuan {
  color: #333;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 0;
  margin-top: 40px;
  padding-bottom: 20px;

  .li {
    .p1 {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      margin-right: 32px;
      vertical-align: top;
    }

    .p2 {
      display: inline-block;
      font-size: 16px;
      margin-right: 32px;
      vertical-align: top;
      cursor: pointer;
    }

    div {
      display: inline-block;
      font-size: 16px;
      margin-right: 30px;
      vertical-align: top;
      margin-bottom: 10px;
    }

    .list {
      width: 1040px;

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }
  }
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  margin-top: 0px;

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 25px;
  }

  .list {
    margin-top: 33px;

    .li {
      position: relative;
      margin-bottom: 32px;
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 32px;

      .img {
        width: 300px;
        height: 200px;
      }

      .wenzi {
        display: inline-block;
        vertical-align: top;
        width: 350px;
        height: 154px;
        margin-left: 14px;

        .p1 {
          font-size: 20px;
          color: #333333;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .p2 {
          font-size: 14px;
          color: #666666;
          margin-top: 8px;
          margin-bottom: 8px;
        }

        .p3 {
          font-size: 14px;
          color: #666666;
        }

        .p4 {
          position: absolute;
          bottom: 0;

          img {
            width: 30px;
            height: 30px;
            cursor: pointer;
          }

          span {
            font-size: 14px;
            vertical-align: middle;
          }

          .gong {
            display: inline-block;
            width: 68px;
            height: 23px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 23px;
            color: #64b6a8;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .p5 {
          position: absolute;
          bottom: 32px;
          color: #666666;
        }

        .p6 {
          position: absolute;
          bottom: 0;

          span {
            font-size: 14px;
            display: block;
            margin-top: 10px;
          }
        }
      }

      .but {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        //width: 151px;
        top: 34px;
        right: 0px;

        .but1 {
          cursor: pointer;
          position: relative;
          box-sizing: border-box;
          display: inline-block;
          padding: 16px 18px 16px 67px;
          height: 54px;
          background: rgba(100, 182, 168, 0.08);
          border: 1px solid #64b6a8;
          border-radius: 6px;
          font-size: 16px;
          color: #64b6a8;
          margin-bottom: 17px;

          img {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 7px;
            left: 19px;
          }
        }

        .but2 {
          cursor: pointer;
          width: 151px;
          position: relative;
          box-sizing: border-box;
          display: inline-block;
          align-items: center;
          padding: 16px 18px 16px 67px;
          height: 54px;
          background: #64b6a8;
          border-radius: 6px;
          font-size: 16px;
          color: #fff;

          img {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 7px;
            left: 19px;
          }
        }
      }

      .jiage {
        position: absolute;
        width: 110px;
        top: 45px;
        right: 24px;

        p {
          text-align: center;
        }

        .p1 {
          font-size: 26px;
          color: red;
        }

        .p2 {
          font-size: 12px;
          color: #333;
          margin-top: 10px;
        }
      }

      .el-checkbox {
        vertical-align: middle;
        margin-right: 20px;
      }

      /deep/.el-checkbox__inner {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 8px;
        height: 18px;
        left: 11px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.swiper {
  position: relative;
  width: 1200px;
  height: 270px;
  overflow: hidden;
  margin-left: 50%;
  transform: translateX(-50%);
}

/deep/.swiper-button-prev,
.swiper-button-next {
  color: #64b6a8;
}
</style>
